<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">

*{
	margin:0px;
	padding:0px;
}
#videoContain{}
#timeInfo{
    height:30px;
    position:absolute;
    background:#000;
    opacity:0.6;
    visible:hidden;
    left:100px;
    -webkit-border-radius:5px; 
}
#timeTxt{
    height:30px;
    color:#CCC;
    line-height:30px;
    text-align:center;
    font-family:Arial;
}
</style>


    
<script type="text/javascript" src="data:application/x-javascript;base64,KGZ1bmN0aW9uKCl7Cgl2YXIgaXNTaG93VGltZSA9IGZhbHNlOwoJdmFyIGlzRW5kZWQgPSBmYWxzZTsKCXZhciB2aWQgPSBudWxsOwoJdmFyIHRpbWVUZXh0ID0gbnVsbDsKCXZhciB2aWRlb0NvbnRhaW4gPSBudWxsOwoJdmFyIHRpbWVUeHQgPSBudWxsOwoJdmFyIG1vZ292aWRlbyA9IHdpbmRvdy5tb2dvdmlkZW8gPSB7fTsKCQoJCgkvKiogQSBRdWV1ZSBvZiBDYWxscyB0byB0aGUgTmF0aXZlIFNESyB0aGF0IHN0aWxsIG5lZWQgZXhlY3V0aW9uICovCiAgIHZhciBuYXRpdmVDYWxsUXVldWUgPSBbIF07CiAKICAgLyoqIElkZW50aWZpZXMgaWYgYSBuYXRpdmUgY2FsbCBpcyBjdXJyZW50bHkgaW4gcHJvZ3Jlc3MgKi8KICAgdmFyIG5hdGl2ZUNhbGxJbkZsaWdodCA9IGZhbHNlOwoJCgkvKioKCSphbGwgYWxsIGV2ZW50IGxpc3RlbmVyCgkqLwoJbW9nb3ZpZGVvLmFkZFZpZGVvRXZlbnQgPSBmdW5jdGlvbih2aWRPYmopewoJCS8vdmFyIGV2ZW50QXJyID0gWydsb2Fkc3RhcnQnLCdwcm9ncmVzcycsJ3N1c3BlbmQnLCdhYm9ydCcsJ2Vycm9yJywnc3RhbGxlZCcsJ3BsYXknLCdwYXVzZScsJ2xvYWRlZG1ldGFkYXRhJywnbG9hZGVkZGF0YScsJ3dhaXRpbmcnLCdwbGF5aW5nJywnY2FucGxheScsJ2NhbnBsYXl0aHJvdWdoJywnc2Vla2luZycsJ3NlZWtlZCcsJ3RpbWV1cGRhdGUnLCdlbmRlZCcsJ3JhdGVjaGFuZ2UnLCdkdXJhdGlvbmNoYW5nZScsJ3ZvbHVtZWNoYW5nZSddOwoJCXZhciBldmVudEFyciA9IFsnbG9hZHN0YXJ0JywnZXJyb3InLCdjYW5wbGF5dGhyb3VnaCcsJ2VuZGVkJ107CgkJaWYodmlkT2JqICE9IG51bGwpewoJCQlmb3IodmFyIGVOYW1lIGluIGV2ZW50QXJyKXsKCQkJCXZhciBlU3RyID0gZXZlbnRBcnJbZU5hbWVdOwoJCQkJdmlkT2JqLmFkZEV2ZW50TGlzdGVuZXIoZVN0ciwgbW9nb3ZpZGVvLnZpZGVvRXZlbnQsIGZhbHNlKTsKCQkJfQoJCX0KCQkKCX07CgkKCW1vZ292aWRlby52aWRlb0V2ZW50ID0gZnVuY3Rpb24oZSl7CgkJCgkJaWYgKGUudHlwZSA9PT0gJ2VuZGVkJyl7CgkJCQoJCQlpZighaXNFbmRlZCl7CgkJCQlpc0VuZGVkID0gdHJ1ZTsKCQkJCW1vZ292aWRlby5leGVjdXRlTmF0aXZlQ2FsbCgnZXZlbnQnLCduYW1lJyxlLnR5cGUpOwoJCQl9CgkJCQoJCX1lbHNlewoJCQltb2dvdmlkZW8uZXhlY3V0ZU5hdGl2ZUNhbGwoJ2V2ZW50JywnbmFtZScsZS50eXBlKTsKCQl9Cgl9OwoJCgkvKioKCSp1cGRhdGUgdGltZSB0ZXh0CgkqLwoJbW9nb3ZpZGVvLnVwZGF0ZVRpbWUgPSBmdW5jdGlvbigpewoJCXZhciBsVCA9IHBhcnNlSW50KCAodmlkLmR1cmF0aW9uLXZpZC5jdXJyZW50VGltZSsxKSApOwoJCWlmKGxUIDw9IDApewoJCQkKCQkJaWYoIWlzRW5kZWQpewoJCQkJCgkJCQlpc0VuZGVkID0gdHJ1ZTsKCQkJCW1vZ292aWRlby5leGVjdXRlTmF0aXZlQ2FsbCgnZXZlbnQnLCduYW1lJywnZW5kZWQnKTsKCQkJCQoJCQl9CgkJCQoJCQlyZXR1cm47CgkJfQoJCWlmKGxUIDwgMTAgJiYgbFQgPjApewoJCQlsVCA9ICIwIitsVDsKCQkJfQoJCXRpbWVUeHQuaW5uZXJIVE1MID0gJ+WJqeS9mScrbFQrJ+enkiAnOwoJCWlmKHZpZC5kdXJhdGlvbi12aWQuY3VycmVudFRpbWUgPjAgKXsKCQkJc2V0VGltZW91dChtb2dvdmlkZW8udXBkYXRlVGltZSw0OTkpOwoJCX0KCX07CgkKCS8qKgoJKnJlc2l6ZSB2aWRlbyB2aWV3CgkqLwoJbW9nb3ZpZGVvLnJlc2l6ZVZpZXcgPSBmdW5jdGlvbih3LGgpewoJCQoJCWlmKHZpZGVvQ29udGFpbil7CgkJCXZpZGVvQ29udGFpbi5zdHlsZS53aWR0aCA9IHcrJ3B4JzsKCQkJdmlkZW9Db250YWluLnN0eWxlLmhlaWdodCA9IGgrJ3B4JzsKCQl9CgkJCgkJaWYodmlkKXsKCQkJdmlkLnN0eWxlLndpZHRoID0gdysncHgnOwoJCQl2aWQuc3R5bGUuaGVpZ2h0ID0gaCsncHgnOwoJCX0KCX07CgkKCS8qKgoJKmFkZCB2aWRlbyB1cmwgYW5kIHByZWxvYWQgaXQuCgkqLwoJbW9nb3ZpZGVvLmFkZFZpZGVvID0gZnVuY3Rpb24oc3JjKXsKCQkKCQl2aWQgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnbWVkaWEnKTsKCQl2aWRlb0NvbnRhaW4gPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgndmlkZW9Db250YWluJyk7CgkJdGltZVR4dCA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCd0aW1lVHh0Jyk7CgkJCgkJaXNFbmRlZCA9IGZhbHNlOwoJCQoJCXZpZC5zcmMgPSBzcmM7CgkJdmlkLnBsYXkoKTsgCgkJbW9nb3ZpZGVvLmFkZFZpZGVvRXZlbnQodmlkKTsKCQlpZih2aWQucmVhZHlTdGF0ZSAhPT0gNCl7CgkJCXNldFRpbWVvdXQoZnVuY3Rpb24oKXsKCQkJCXZpZC5wYXVzZSgpOyAKCQkJfSwgMSk7IAoJCX1lbHNlewoJCQltb2dvdmlkZW8ub25DYW5QbGF5KCk7CgkJfQoJfTsKCQoJLyoqCgkqcGxheSB2aWRlbwoJKi8KCW1vZ292aWRlby5wbGF5ID0gZnVuY3Rpb24oKXsKCQlpZih2aWQpewoJCQlzZXRUaW1lb3V0KGZ1bmN0aW9uKCl7CgkJCQl2aWQucGxheSgpOwoJCQkJbW9nb3ZpZGVvLmNyZWF0ZVRpbWVUZXh0KCk7CgkJCX0sIDEpOyAKCQkJCgkJfQoJfTsKCQoJLyoqCgkqcGF1c2UgdmlkZW8KCSovCgltb2dvdmlkZW8ucGF1c2UgPSBmdW5jdGlvbigpewoJCQoJCXNldFRpbWVvdXQoZnVuY3Rpb24oKXsKCQkJCXZpZC5wYXVzZSgpOyAKCQkJfSwgMSk7IAoJCQoJfTsKCQoJLyoqCgkqc2V0dGluZyB0aW1lIGluZm8gZGl2CgkqLwoJbW9nb3ZpZGVvLmNyZWF0ZVRpbWVUZXh0ID0gZnVuY3Rpb24oKXsKCQlpZighaXNTaG93VGltZSl7CgkJCWlzU2hvd1RpbWUgPSB0cnVlOwoJCQl2YXIgdGltZUluZm8gPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgndGltZUluZm8nKTsKCQkJdGltZUluZm8uc3R5bGUudmlzaWJpbGl0eSA9ICd2aXNpYmxlJzsKCQkJdGltZUluZm8uc3R5bGUubGVmdCA9IChwYXJzZUludCh2aWRlb0NvbnRhaW4uc3R5bGUud2lkdGgpIC0gcGFyc2VJbnQodGltZUluZm8uc3R5bGUud2lkdGgpKSsncHgnOwoJCQkKCQkJbW9nb3ZpZGVvLnVwZGF0ZVRpbWUoKTsKCQl9Cgl9OwoJCgkvKioKCSpnZXQgZXJyb3IgY29kZQoJKi8KCW1vZ292aWRlby5nZXRFcnJvckNvZGUgPSBmdW5jdGlvbigpewoJCQoJCXZhciBjb2RlID0gMDsKCQlpZih2aWQpewoJCQkKCQkJY29kZSA9IHZpZC5lcnJvci5jb2RlOwoJCQljb2RlID0gY29kZSA+IDQgfHwgY29kZSA8IDEgPyAwIDpjb2RlOwoKCQl9CgkJCgkJcmV0dXJuIGNvZGU7IAoJCQoJfTsKCQoJCgltb2dvdmlkZW8uZXhlY3V0ZU5hdGl2ZUNhbGwgPSBmdW5jdGlvbiggY29tbWFuZCApIHsKCSAgIGNvbnNvbGUubG9nKCdleGVjdXRlTmF0aXZlQ2FsbCcpOwogICAgICAvLyBidWlsZCBpT1MgY29tbWFuZAogICAgICB2YXIgYnJpZGdlQ2FsbCA9ICJhZHNtb2dvOi8vIiArIGNvbW1hbmQ7CiAgICAgIHZhciB2YWx1ZTsKICAgICAgdmFyIGZpcnN0QXJnID0gdHJ1ZTsKICAgICAgZm9yICggdmFyIGkgPSAxOyBpIDwgYXJndW1lbnRzLmxlbmd0aDsgaSArPSAyICkgewogICAgICAgICB2YWx1ZSA9IGFyZ3VtZW50c1tpICsgMV07CiAgICAgICAgIGlmICggdmFsdWUgPT0gbnVsbCApIHsKICAgICAgICAgICAgLy8gbm8gdmFsdWUsIGlnbm9yZSB0aGUgcHJvcGVydHkKICAgICAgICAgICAgY29udGludWU7CiAgICAgICAgIH0KIAogICAgICAgICAvLyBhZGQgdGhlIGNvcnJlY3Qgc2VwYXJhdG9yIHRvIHRoZSBuYW1lL3ZhbHVlIHBhaXJzCiAgICAgICAgIGlmICggZmlyc3RBcmcgKSB7CiAgICAgICAgICAgIGJyaWRnZUNhbGwgKz0gIj8iOwogICAgICAgICAgICBmaXJzdEFyZyA9IGZhbHNlOwogICAgICAgICB9CiAgICAgICAgIGVsc2UgewogICAgICAgICAgICBicmlkZ2VDYWxsICs9ICImIjsKICAgICAgICAgfQogICAgICAgICBicmlkZ2VDYWxsICs9IGFyZ3VtZW50c1tpXSArICI9IiArIGVzY2FwZSggdmFsdWUgKTsKICAgICAgfQogICAgICAvLyBhZGQgY2FsbCB0byBxdWV1ZQogICAgICBpZiAoIG5hdGl2ZUNhbGxJbkZsaWdodCApIHsKICAgICAgICAgLy8gY2FsbCBwZW5kaW5nLCBxdWV1ZSB1cCByZXF1ZXN0CiAgICAgICAgIG5hdGl2ZUNhbGxRdWV1ZS5wdXNoKCBicmlkZ2VDYWxsICk7CiAgICAgIH0KICAgICAgZWxzZSB7CiAgICAgICAgIC8vIG5vIGNhbGwgY3VycmVudGx5IGluIHByb2Nlc3MsIGV4ZWN1dGUgaXQgZGlyZWN0bHkKICAgICAgICAgbmF0aXZlQ2FsbEluRmxpZ2h0ID0gdHJ1ZTsKCQkgbW9nb3ZpZGVvLmNoYW5nZUxvY2F0aW9uKGJyaWRnZUNhbGwpOwogICAgICB9CiAgIH07CgkKCW1vZ292aWRlby5uYXRpdmVDYWxsQ29tcGxldGUgPSBmdW5jdGlvbiggY21kICkgewoKCS8vIGFueXRoaW5nIGxlZnQgdG8gZG8/CglpZiAoIG5hdGl2ZUNhbGxRdWV1ZS5sZW5ndGggPT0gMCApIHsKCSAgIG5hdGl2ZUNhbGxJbkZsaWdodCA9IGZhbHNlOwoJICAgcmV0dXJuOwoJfQoKCSAvLyBzdGlsbCBoYXZlIHNvbWV0aGluZyB0byBkbwoJIHZhciBicmlkZ2VDYWxsID0gbmF0aXZlQ2FsbFF1ZXVlLnBvcCgpOwoJIAoJIG1vZ292aWRlby5jaGFuZ2VMb2NhdGlvbihicmlkZ2VDYWxsKTsKCSAvL3dpbmRvdy5sb2NhdGlvbiA9IGJyaWRnZUNhbGw7CgoJcmV0dXJuICJPSyI7CiB9OwogbW9nb3ZpZGVvLmNoYW5nZUxvY2F0aW9uID0gZnVuY3Rpb24oIGNvbW1hbmQgKSB7CgkJY29uc29sZS5sb2coY29tbWFuZCk7CgkJLy9pZihmaW5pc2hOYXRpdmUgIT0gdW5kZWZpbmVkKXsKCQkJLy9maW5pc2hOYXRpdmUoKTsKCQkJLy99CgkJd2luZG93LmxvY2F0aW9uID0gY29tbWFuZDsKCX0KfSkoKTsK">
</script>

</head>

<body>
<div id='videoContain' >
    <div id='timeInfo' style='width:80px'>
        <div id='timeTxt'>
            剩余10秒
        </div>
    </div>
    <video id='media'  width="100%" height="100%"  webkit-playsinline>
</div>
</video>
<span id="timeText"></span>

</body>
</html>
